<script setup lang='ts'>
import { useOpen } from '@/pages/home/component/use-open'
import { useGetHomeSence } from '@fl/api/man-api'
import { Splide, SplideSlide } from '@splidejs/vue-splide'

import SenceTab from './sence-tab.vue'

const { openNewWindow } = useOpen()

const active = ref(0)

const { data } = useGetHomeSence()

const senceTabs = computed(() => {
    return data.value?.length
        ? data.value.map((v: any) => {
            return {
                label: v.name,
                value: v.id,
            }
        })
        : []
})

const pdData = computed(() => {
    return data.value?.length ? data.value[active.value] : []
})

function clickHandle({ idx, item }) {
    console.log(222, item)
    active.value = idx
}

function view(item?: any) {
    console.log('view', item)

    openNewWindow('/product-info', {
        id: item.productNo,
    })
}

function getPdImg(item: any) {
    if (!item?.productImage)
        return ''

    return item.productImage.split(';')[0]
}

function openVr() {
    if (pdData.value?.url) {
        window.open(pdData.value.url, '_block')
    }
}
</script>

<template>
    <div class="mx-auto mb-60 h-1000 w-1300">
        <SenceTab :tabs="senceTabs"
                  @handle="clickHandle"
        />

        <div class="mt-40">
            <div class="relative h-624">
                <img :src="pdData?.img"
                     alt=""
                     class="absolute h-624 w-100% cursor-pointer left-0 top-0"
                     @click="openVr"
                >

                <div class="bg-#eee absolute h-328 w-1160 bottom--268 left-80">
                    <Splide class="sence-splide"
                            :options="{
                                autoplay: true,
                                gap: '80px',
                                perPage: 6,
                                rewind: true,
                            }"
                    >
                        <SplideSlide v-for="(item, index) in pdData?.productList"
                                     :key="index"
                        >
                            <div class="text-center h-268 w-180 cursor-pointer"
                                 @click.stop="view(item)"
                            >
                                <div class="h-180 w-180"
                                     :style="{ background: `url(${getPdImg(item)}) 0% 0% / auto 100% no-repeat` }"
                                     alt=""
                                />

                                <p class="mt-16 text-16 c-#1D2129 font-600 text-ellipsis cursor-pointer ws-nowrap of-hidden">
                                    {{ item?.productName }}
                                </p>

                                <p class="info-sty mb-10 text-14 c-#767676">
                                    {{ item?.productNo }}
                                </p>

                                <!-- <p class="c-#DA0004">
                                    ¥ {{ item }}
                                </p> -->
                            </div>
                        </SplideSlide>
                    </Splide>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.sence-splide {
    .info-sty {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    :deep(.splide__pagination) {
        display: none;
    }

    :deep(.splide__arrows) {
        position: absolute;
        bottom: 0;
        right: 56px;

        .splide__arrow {
            width: 40px;
            height: 40px;
            background: #fff;
            color: #1d2129;

            svg {
                height: 0.6em;
                width: 0.6em;
            }
        }

        .splide__arrow--prev {
            left: -60px;
        }

        .splide__arrow--next {
            right: -40px;
        }
    }
}
</style>
